<template>
  <!-- <div class="echart" ref="chartDom"></div> -->
  <div
    :class="eChart"
    :style="`width: 100%; height:100%;zoom:${zoom};transform:scale(${
      1 / zoom
    });transform-origin:0 0`"
    ref="chartDom"
  ></div>
</template>
<script setup>
//按需导入需要用到的 vue函数 和 echarts
import {
  ref,
  inject,
  onMounted,
  onBeforeUnmount,
  defineProps,
  watch,
} from "vue";

let zoom = ref(""); //缩放还原初始值

const eChart = ref("eChart" + Date.now() + Math.random()); //动态切换盒子

const echarts = inject("echarts"); //inject刷新组件
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
const chartDom = ref("");
let myChart = null;
const props = defineProps({
  //接受父组件传参
  option: Object,
});
//重绘图表函数
const resizeHandler = () => {
  myChart.resize();
};
//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
const debounce = (fun, delay) => {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fun();
    }, delay);
  };
};
const cancalDebounce = debounce(resizeHandler, 500);
//页面成功渲染，开始绘制图表
onMounted(() => {
  //配置为 svg 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
  myChart = echarts.init(chartDom.value, null, { renderer: "svg" });
  // myChart = echarts.init(chartDom.value)
  myChart.setOption(props.option, true);
  //自适应不同屏幕时改变图表尺寸

  //   window.addEventListener("resize", cancalDebounce);

  if (document.body.style.zoom != "") {
    zoom.value = 1 / document.body.style.zoom;
  } else {
    zoom.value = 1;
  }

  window.addEventListener("resize", () => {
    zoom.value = 1;
    // zoom.value = 1 / document.body.style.zoom;
    cancalDebounce();
  });
});
//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener("resize", cancalDebounce);
  myChart.dispose();
});
//监听图表数据时候变化，重新渲染图表
watch(
  () => props.option,
  () => {
    myChart.setOption(props.option, true);
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
</style>


